<template>
  <div class="login-page">
    <button>LoginPage</button>
    <button>用户名密码</button>
    <button @click="logon()">登录</button>
    <ElButton type="success">xxx</ElButton>
    <ElTag>ttt</ElTag>
    <VanButton type="success">jjj</VanButton>
    <JustSo></JustSo>
    <JustNow></JustNow>
    <ElButton @click="deepCopy()">深拷贝</ElButton>
    <div ref="canvas" style="width: 300px; height: 300px; border: solid 2px red"></div>
    <ElButton @click="go(33)">不节流</ElButton>
    <ElButton @click="goTh(44)">节流2s</ElButton>
    <div class="yyxx" @click="yyxxx()">yyxx</div>
    <!-- <div class="cm" >css module CSS模块化</div> -->
    <div :class="$style.cm" @click="cssm()">css module CSS模块化{{ $style.primaryColor }}</div>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'LoginPage',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      length: '33px',
      width1: 33
    }
  },
  computed: {
    width2() {
      return this.width1 + 'px'
    }
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    const myChart = echarts.init(this.$refs.canvas as any)
    // var myChart = echarts.init(document.getElementById('main'))
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    })
  },
  methods: {
    // sampleM() {},
    logon() {
      this.$router.push('/app')
    },
    deepCopy() {
      const a = {
        name: 'zhangsan',
        friend: {
          name: 'wangwu',
          age: 11
        }
      }
      //  ...  object assign 浅拷贝
      const b = lodash.cloneDeep(a)
      b.friend.age = 12
      console.log(a, b)
    },
    go(t: number) {
      console.log('不节流----')
      console.log(t)
      console.log('不节流----')
    },
    // goTh
    // goTh(t:number){
    //   lodash.throttle(this.go,2000)
    // }
    goTh: lodash.throttle(function (t: number) {
      console.log('节流----')
      console.log(t)
      console.log('节流----')
    }, 2000),
    // 防抖debounce 一般用于input 标签 setTimeout
    // 节流throttle 一般用于button标签 有冷却 setTimeout
    // 防抖 你先别急
    yyxxx() {
      // console.log(this.length)
      // //  const a =  Number(this.length.split("px")[0])
      // const a = parseInt(this.length)
      // this.length = a + 100 + 'px'
      // console.log(a)
      this.width1 += 100
    },
    cssm() {
      console.log(this.$style)
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>
<!-- css 区域 如何 读取 js变量  -->
<!-- js区域 如何 读取 css变量  -->
<!--<style scoped>-->
<!-- css 局部css的实现 scoped module -->
<style lang="scss" scoped>
.login-page {
  background-color: turquoise;
}
.yyxx {
  border: solid 2px rebeccapurple;
  // width: v-bind(length);
  width: v-bind(width2);
}
</style>
<style lang="scss" module>

.cm {
  border: solid 2px saddlebrown;
}
.bm {
  color: blue;
}
:export {
  primaryColor: #0099ff;
}
</style>
